<div class="row-list">
    <#list page.content as destES>
    <div class="wrapper" data-id="${destES.id}">
           <ul class="clearfix">
               <li class="item" data-id="${destES.id}">
                   <div class="img" ">
                       <a href="/destination/guide?id=${destES.id}" target="_blank">
                           <img height="200" width="320" src="${destES.coverUrl!}" style="display: inline;" data-id="${destES.id}">
                           <div class="title">${destES.name}</div>
                       </a>
                   </div>
                   <div class="info">
                      <p class="detail">${destES.info!}</p>
                   </div>
                   <div class="mask on"  style="display:none">

                   </div>
               </li>
           </ul>
    </div>
    </#list>

    <div style="float: right">
        <div style="float: left" ><span style="line-height:30px"> 共${page.totalPages!}页/${page.totalElements}条&nbsp;&nbsp;&nbsp;</span></div>
        <div id="pagination" class="jq-pagination" style="display: inline"></div>
    </div>
    <script>
        $("#pagination").jqPaginator({
            totalPages: ${page.totalPages!},
            visiblePages: 5,
            currentPage: ${page.number+1}||1,
                prev: '<a class="prev" href="javascript:void(0);">上一页<\/a>',
                next: '<a class="next" href="javascript:void(0);">下一页<\/a>',
                page: '<a href="javascript:void(0);">{{page}}<\/a>',
                last: '<a class="last" href="javascript:void(0);" >尾页<\/a>',
                onPageChange: function(page, type) {
            console.log(page);
            if(type == 'change'){
                console.log(4);
                $("#currentPage").val(page);
                console.log(page);
                $("#searchForm").submit();
            }

        }
        })
    </script>
    <script>

        $('.wrapper').mouseover(function(){
            var destId = $(this).data("id");
            var hasClass = $(this).find('.mask').hasClass("on");
            console.log(hasClass);
            if(hasClass){
            $.get("/destination/spot",{destId:destId},function(data){
                $('.mask').html(data);
            });
            //$(this).find('.mask').fadeIn("fast");
            $(this).find('.mask').show();
            $(this).find('.mask').removeClass("on");
            $(this).find('.info').hide();
            }

        });
        $('.wrapper').mouseout(function(){
            //$(this).find('.mask').fadeOut("fast");
            $(this).find('.mask').hide();
            $(this).find('.mask').addClass("on");
            $(this).find('.info').show();
        })
    </script>
</div>

